@import "color";

@font-face {
  font-family: 'Moon-Light';
  src: url('../assets/fonts/Moon-Light.eot');
  src: url('../assets/fonts/Moon-Light.eot?#iefix') format('embedded-opentype'),
      url('../assets/fonts/Moon-Light.woff2') format('woff2'),
      url('../assets/fonts/Moon-Light.woff') format('woff'),
      url('../assets/fonts/Moon-Light.ttf') format('truetype'),
      url('../assets/fonts/Moon-Light.svg#Moon-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}

@custom-media --small-viewport (max-width: 466px);
@custom-media --mac-viewport (max-width: 1280px);
@custom-media --laptop-viewport (max-width: 1366px);
@custom-media --ipad-viewport (max-width: 1024px);
@custom-media --ipad-small-viewport (max-width: 768px);

@define-mixin font-main {
  font-family: 'Source Sans Pro', 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', monospace;
}

@define-mixin hover {
  cursor: pointer;
  transition: .2s all ease;
  &:hover {
    opacity: 0.9;
  }
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1, h2 {
  margin: 0;
}

a {
  color: #34495e;
  text-decoration: none;
  &:hover {
    opacity: 0.9;
  }
}

input, textarea {
  outline: none;
}

html, body {
  @mixin font-main;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  font-size: 12px;
  color: white;
  background-color: #112332;
}
